<template>
	<view class="view">
		<view class="header">
			<view class="nav" :style="{ paddingTop: StatusBar + 'px' }">
				<view class="city" @tap.stop="selectCity()">
					<image src="/static/images/positionb.png"></image>
					<view>{{ city.title }}</view>
					<image src="/static/images/drop-downb.png"></image>
				</view>
				<view class="search-box" @tap.stop="to('/pages/IndexPages/search/main')">
					<image class="icon" src="/static/images/ic_search.png"></image>
					<view class="text">搜索内容</view>
				</view>
			</view>
			<swiper class="banner" :autoplay="true" :circular="true" :style="{ marginTop: bannerMarginTop + 'px'}">
				<swiper-item v-for="(item, index) in bannerList[0]" :key="index">
					<image @click="link(item)" :src="item.imageUrl" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="section">
				<!-- 公告 -->
				<!-- <view class="notice-box">
					<image src="/static/images/announcement.png"></image>
					<swiper class="notice" vertical autoplay circular>
						<swiper-item v-for="(item, index) of noticeList" :key="index"
							@click="to('/pages/other/article/article?id=' + item.id)">{{ item.title }}</swiper-item>
					</swiper>
					<image src="/static/images/ic_next.png"></image>
				</view> -->
				<view class="function">
					<!-- 广告 -->
		<!-- 				<view class="adv" v-if="bannerList[1] && bannerList[1].length > 0 && bannerList[2] && bannerList[2].length > 0">
							<swiper class="item">
								<swiper-item v-for="(item, index) in bannerList[1]" :key="index">
									<image @click="link(item)" :src="item.imageUrl" mode="aspectFill"></image>
								</swiper-item>
							</swiper>
							<swiper class="item">
								<swiper-item v-for="(item, index) in bannerList[2]" :key="index">
									<image @click="link(item)" :src="item.imageUrl" mode="aspectFill"></image>
								</swiper-item>
							</swiper>
						</view> -->
						<view class="adv">
							<swiper class="item">
								<swiper-item>
									<image @click="link({jumpPath: '/pages/serve/serve', position: 1, type: 1})" src="https://h5.wmel.cn/upload/p12x.png" mode="aspectFill"></image>
								</swiper-item>
							</swiper>
							<swiper class="item">
								<swiper-item>
									<image @click="link({type: 1, position: 2})" src="https://h5.wmel.cn/upload/p22x.png" mode="aspectFill"></image>
								</swiper-item>
							</swiper>
						</view>
						<!-- 服务 -->
						<view class="grid" v-if="serviceItemsList.length > 0">
							<view v-for="(item, index) in serviceItemsList" :key="index" class="item"
								@click="to('/pages/servePages/serveDetail?id=' + item.id)">
								<image :src="getCompressListImage(item.icon)" mode="aspectFit"></image>
								<view class="service-name">{{ item.serviceName }}</view>
							</view>
							<view class="item" @click="to('/pages/serve/serve')">
								<image src="/static/images/mores.png" mode="aspectFit"></image>
								<view>查看更多</view>
							</view>
						</view>
					</view>
				</view>
		</view>
		<!-- 陪诊师列表 -->
		<!-- <u-sticky :offsetTop="CustomBar">
			<view class="tab-list">
				<view class="tab-item" v-for="(item, index) in tabs" :key="index" @click="tabChange(index)">
					<view class="value" :class="current == index ? 'active' : ''">{{ item.name }}</view>
					<view class="line" v-if="current == index"></view>
				</view>
			</view>
		</u-sticky> -->

		<view class="list-wrap">
			<view>
				<cc-beautyTabs class="list-type-tabs" @tabChange="tabListChange" :tabList="tabList"></cc-beautyTabs>
			</view>
			<view v-if="activeListTab==0">
				<!-- 医生列表 -->
				<view v-if="current == 1" class="list" :style="{ minHeight: `calc(100vh - 52px - ${CustomBar}px)` }">
					<doctor-item v-for="(item, index) in tabs[1].list" :key="index" :item="item"></doctor-item>
				</view>
				<!-- 陪诊师列表 -->
				<view v-else class="list">
					<escort-item v-for="(item, index) in tabs[0].list" :key="index" :item="item"></escort-item>
					<view v-if="hospitalList.length > 0 && tabs[0].list.length == 0" class="empty-view">暂无陪诊师</view>
				</view>
			</view>
			<!-- 医院列表 -->
			<view v-else class="hospital-box">
<!-- 				<view class="title-box">
					<view class="more-box" @click="to('/pages/IndexPages/hospitalList')">
						<text>查看更多</text>
						<image src="/static/images/ic_next.png" mode="aspectFit"></image>
					</view>
				</view> -->
				<scroll-view class="hospital-list" scroll-y>
					<view class="hospital-item" v-for="(item, index) in hospitalList" :key="index"
						@click="to('/pages/IndexPages/hospitalDetails?id=' + item.id)">
						<view class="row">
							<image class="pic" :src="getCompressListImage(item.icon)" mode="aspectFill"></image>
							<image v-if="item.hospitalGrade=='三甲'" class="sanjia" src="/static/images/sanjia.png" mode="aspectFill"></image>
							<view class="info">
								<view class="flex-row">
									<view class="name singline flex-1">{{ item.hospitalName }}</view>
									<view class="tags">
										<!-- <text>{{ item.hospitalGrade }}</text> -->
										<label>{{ item.hospitalType }}</label>
									</view>
								</view>
								<view class="address">
									<image class="icon-location" src="/static/images/location.png"></image>
									<view class="text singline">{{ item.hospitalAddress }}</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 悬浮按钮 -->
		<view class="float-box">
			<!-- #ifdef MP-WEIXIN -->
			<button class="item-box" open-type="contact">
				<image src="/static/images/customersy.png"></image>
				<view>客服</view>
			</button>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view class="item-box" @click="customer">
				<image src="/static/images/customersy.png"></image>
				<view>客服</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="item-box" @click="HCustomer">
				<image src="/static/images/customersy.png"></image>
				<view>客服</view>
			</view>
			<!-- #endif -->
			<view class="divider"></view>
			<view class="item-box" @click="getConfig">
				<image src="/static/images/telephonesy.png"></image>
				<view>电话</view>
			</view>
		</view>
		<code-popup ref="popup"></code-popup>
	</view>
</template>

<script>
	import EscortItem from '@/components/escort-item/escort-item.vue';
	import DoctorItem from '@/components/doctor-item/doctor-item.vue';
	import CodePopup from '@/components/codePopup.vue';
	import {
		getLocation,
		reverseGeocoder
	} from '@/components/public.js';
	import {
		getBanner,
		noticeList,
		getEscortList,
		getDoctorList,
		getHospitalList,
		getServiceItemsListByParam,
		getConfig
	} from '@/apis/request.js';

	export default {
		components: {
			EscortItem,
			DoctorItem,
			CodePopup
		},
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				city: {
					title: '厦门市',
					id: 350200
				},
				bannerMarginTop: 25 + 44,
				bannerList: [],
				noticeList: [],
				serviceItemsList: [],
				hospitalList: [],
				tabList: [{
						key: '1',
						value: '陪诊师列表'
				},
				{
						key: '2',
						value: '医院列表'
				}],
				activeListTab: 0,
				current: 0,
				tabs: [{
						name: '陪诊师',
						page: 1,
						total: 0,
						list: []
					},
					{
						name: '医生点评',
						page: 1,
						total: 0,
						list: []
					}
				],
				sweixin: null
			};
		},
		onShow() {
			let sysInfo = uni.getSystemInfoSync();
			let menuInfo = uni.getMenuButtonBoundingClientRect();
			let navigationBarHeight = (menuInfo.top - sysInfo.statusBarHeight) * 2 + menuInfo.height;
			this.bannerMarginTop = sysInfo.statusBarHeight + navigationBarHeight;
			uni.$on('cityChange', data => {
				// console.log(data,'城市改变----')
				this.city = data;
				this.init();
			});
		},
		onLoad(options) {
			if (options.inviteCode) {
				uni.setStorageSync('inviteCode', options.inviteCode);
			}
			const user = uni.getStorageSync('userInfo');
			if (user && user.registeredStatus == 0) {
				//未完善信息、需要先跳转完善信息
				this.to('/pages/LoginPages/perfectInfo/main');
			} else if (options.channel == 'tljt') {
				this.to('/pages/accompanyDiagnosis/index?channel=tljt');
			} else {
				this.location();
				this.init();
			}
			// #ifdef APP-PLUS
			this.getPlus();
			// #endif
		},
		//下拉加载
		onReachBottom() {
			const tab = this.tabs[this.current];
			if (tab.list.length < tab.total) {
				this.getList();
			}
		},
		onPullDownRefresh() {
			this.init();
		},
		onShareAppMessage() {
			return {
				title: this.$shareContent,
				imageUrl: this.$shareImageUrl,
				path: 'pages/index/main'
			};
		},
		onShareTimeline() {
			return {
				title: this.$shareContent,
				imageUrl: this.$shareImageUrl
			}
		},
		methods: {
			/**
			 * 获取更新后的用户信息并更新
			 */
			userInfo(lastCityId) {
				getUserInfo({ lastCityId}).then(res => {
					console.log(res,'res-------获取用户信息')
					uni.setStorage({
						key: 'userInfo',
						data: res,
						success() {
							// uni.reLaunch({
							// 	url: '/pages/index/main'
							// });
						}
					});
				}).catch(err => {
					this.$Toast(err.message || '请求失败，请重试！');
				})
			},
			tabListChange(e) {
				this.activeListTab = e.detail.index
			},
			HCustomer() {
				this.$refs.popup.show = true;
			},
			init() {
				uni.showLoading({
					title: '加载中'
				});
				this.getBanner();
				this.getNoticeList();
				this.getServiceItemsList();
				this.getHospitalList();
				const tab = this.tabs[this.current];
				tab.page = 1;
				tab.total = 0;
				tab.list = [];
				this.getList();
			},
			tabChange(index) {
				this.current = index;
				this.getList();
			},
			link(item) {
				if (item.type == 2 && item.jumpPath) {
					uni.navigateToMiniProgram({
						shortLink: item.jumpPath
					});
				} else if (item.type == 1 && item.position == 2) { // 体检定制
					uni.navigateToMiniProgram({
					  appId: 'wx755a93ad829d461f',
					  path: 'pages/index/index?from=3',
					  extraData: {
					  },
					  success(res) {
					    // 打开成功
					  }
					})
				} else if (item.type == 1 && item.jumpPath) {
					if (item.jumpPath.indexOf('http') == 0) {
						this.to('/pages/other/webView/main?path=' + encodeURIComponent(item.jumpPath));
					} else {
						this.to(item.jumpPath);
					}
				}
			},
			/**
			 * 公告列表
			 */
			getNoticeList() {
				noticeList({
					pageNo: 1,
					pageSize: 10
				}).then(res => {
					this.noticeList = res.records;
				});
			},
			/**
			 * 获取广告列表
			 * @return {Array} 广告列表[[],[],[]]
			 */
			getBanner() {
				Promise.all([
					getBanner({
						position: 0
					}),
					getBanner({
						position: 1
					}),
					getBanner({
						position: 2
					})
				]).then(res => {
					this.bannerList = res;
				}).finally(() => {
					uni.stopPullDownRefresh();
					uni.hideLoading();
				});
			},
			/**
			 * 定位当前城市
			 */
			location() {
				let that = this
				getLocation().then(res => {
					reverseGeocoder(res.latitude, res.longitude, city => {
						if (city && this.city.id != city.id) {
							this.city = city;
							this.init();
						}
						uni.showModal({
							title: '提示',
							content: '您当前定位服务“'+this.city.title+'”，是否重新选择？',
							cancelText: '否',
							confirmText: '是',
							success(res) {
								if (res.confirm) {
									that.selectCity()
								} else if (res.cancel) {
								}
							}
						});
					});
				});
			},
			//获取列表
			getList() {
				const tab = this.tabs[this.current];
				const params = {
					cityId: this.city.id,
					pageNo: tab.page,
					pageSize: 10,
					status: ''
				};
				const requestList = this.current == 1 ? getDoctorList : getEscortList;
				requestList(params).then(res => {
					const list = res.records || [];
					if (tab.page == 1) {
						tab.total = res.total;
						tab.list = list;
					} else {
						tab.list = tab.list.concat(list);
					}
					if (tab.list.length < tab.total) {
						tab.page++;
					}
				});
			},
			//选择城市
			selectCity() {
				let that = this;
				uni.navigateTo({
					url: '/pages/IndexPages/ChooseCity/main',
					events: {
						changeCity(data) {
							that.city = data;
							uni.setStorageSync('city', data);
							that.init();
						}
					}
				});
			},
			to(url) {
				uni.navigateTo({
					url: url,
					fail: err => {
						//如果打开界面失败，可能是tab栏尝试用切换tab开启
						uni.switchTab({
							url: url
						});
					}
				});
			},
			//获取城市医院列表
			getHospitalList() {
				getHospitalList({
					cityId: this.city.id
				}).then(list => {
					this.hospitalList = list || [];
				});
			},
			//中间服务项目
			getServiceItemsList() {
				getServiceItemsListByParam({
					cityId: this.city.id
				}).then(res => {
					this.serviceItemsList = res.splice(0, 4);
				});
			},
			//获取号码
			getConfig() {
				getConfig().then(res => {
					if (res.homePhone) {
						let phoneNum = res.homePhone.split(',');
						console.log(phoneNum);
						uni.showActionSheet({
							itemList: phoneNum,
							success: function(res) {
								uni.makePhoneCall({
									phoneNumber: phoneNum[res.tapIndex] //仅为示例
								});
							},
							fail: function(res) {
								console.log(res.errMsg);
							}
						});
					} else {
						uni.showToast({
							title: '您暂时没有号码',
							duration: 2000,
							icon: 'none'
						});
					}
				});
			},
			customer() {
				this.sweixin.launchMiniProgram({
					id: this.$shareMiniId //要跳转小程序的原始ID
				});
			},
			getPlus() {
				//获取当前显示的webview
				var pages = getCurrentPages();
				var page = pages[pages.length - 1];
				var currentWebview = page.$getAppWebview();
				//调用H5+APP的扩展API
				var shares = null;
				let that = this;
				var pusher = plus.share.getServices(
					function(s) {
						shares = {};
						for (var i in s) {
							var t = s[i];
							shares[t.id] = t;
						}
						that.sweixin = shares['weixin'];
					},
					function(e) {
						console.log('获取分享服务列表失败：' + e.message);
					}
				);
				//放入当前的webview
				currentWebview.append(pusher);
			},
			close() {
				this.show = false;
			},
			getCompressListImage(url) {
				return url ? url + '?x-oss-process=image/resize,w_150' : '/static/images/ic_img.png'
			}
		}
	};
</script>

<style lang="scss" scoped>
	.view {
		background-color: #f2f2f2;
		background: url(../../static/images/bg_home.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
		
		.flex-row {
			display: flex;
			align-items: center;
		}
		.flex-1 {
			flex: 1;
		}
		.header {
			background: url(../../static/images/bg_home.png);
			background-size: 100% auto;
			background-repeat: no-repeat;
		}
		.nav {
			position: fixed;
			z-index: 999;
			left: 0;
			top: 0;
			right: 0;
			padding-top: var(--status-bar-height);
			height: 44px;
			display: flex;
			flex-direction: row;
			align-items: center;
			background: url(../../static/images/bg_home.png);
			background-size: 100% auto;
			background-repeat: no-repeat;
			
			.city {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 0 30upx;
				height: 63upx;

				view {
					margin: 0 5upx;
					color: white;
					font-size: 28upx;
				}

				image {
					width: 22upx;
					height: 27upx;

					&:last-child {
						width: 10upx;
						height: 6upx;
					}
				}
			}

			.search-box {
				flex: 1;
				//#ifdef MP-WEIXIN
				margin-right: 100px;
				//#endif
				//#ifndef MP-WEIXIN
				margin-right: 30upx;
				//#endif
				padding: 15upx 20upx;
				display: flex;
				align-items: center;
				align-content: center;
				background-color: #fff;
				border-radius: 45upx;

				.icon {
					width: 23upx;
					height: 24upx;
				}

				.text {
					margin-left: 15upx;
					color: white;
					font-size: 24upx;
					color: #666;
				}
			}
		}

		.banner {
			padding-top: 10upx;
			margin: 0upx 30upx;
			margin-top: calc(var(--status-bar-height) + 44px);
			height: 320upx;
			overflow: hidden;

			image {
				border-radius: 20upx;
				width: 100%;
				height: 320upx;
			}
		}
		.section {
			border-bottom: 20upx solid #f5f7f8;
			margin-top: 10upx;
			padding: 0 30upx;
			.function {
				background-color: #fff;
				border-radius: 16upx;
				padding: 16upx;
			}
			.grid {
				display: flex;
				flex-direction: row;
				align-items: center;

				.item {
					flex: 1;
					padding: 30upx 0 20upx 0;
					text-align: center;
					font-size: 22upx;
					color: #333333;
					
					.service-name {
						font-size: 24upx;
						color: #333;
					}
					
					image {
						width: 94upx;
						height: 94upx;
					}
				}
			}

			.notice-box {
				margin: 20upx 30upx;
				margin-bottom: 20upx;
				display: flex;
				flex-direction: row;
				align-items: center;
				border: 1upx solid #e8e8e8;
				border-radius: 20upx;

				.notice {
					flex: 1;
					height: 70upx;
					line-height: 70upx;
					color: #666666;
					font-size: 24upx;
				}

				image {
					margin: 0 15upx;
					flex-shrink: 0;
					width: 80upx;
					height: 36upx;

					&:last-child {
						width: 14upx;
						height: 25upx;
					}
				}
			}

			.adv {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 18upx;

				.item {
					width: 338rpx;
					height: 160rpx;
					border-radius: 10rpx;

					image {
						border-radius: 10upx;
						width: 100%;
						height: 160upx;
					}
				}
			}
		}
		
		.list-wrap {
			padding: 0 30upx;
			border-radius: 16upx;
			background-color: #fff;
		}
		.list-type-tabs {
			/deep/ .scroll{
				.swiperTab {
					flex: 1;
					color: #666;
					font-size: 32upx;
					&.active {
						color: #333;
					}
				}
			}
		}
		.hospital-box {
			border-bottom: 20upx solid #f5f7f8;

			.title-box {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding-top: 30upx;

				.title {
					flex: 1;
					margin-left: 30upx;
					color: black;
					font-size: 34upx;
					font-weight: 500;
				}

				.more-box {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-right: 30upx;
					color: #999999;
					font-size: 24upx;

					image {
						margin-left: 5upx;
						width: 14upx;
						height: 25upx;
					}
				}
			}

			.hospital-list {
				width: calc(100% - 20rpx);
				padding: 10rpx;
				white-space: nowrap;
				.hospital-item {
					margin: 10rpx;
					background: white;
					border-bottom: 2upx solid #F2F2F2;
					padding: 10upx 0 20upx 0;
					position: relative;
					
					.sanjia {
						position: absolute;
						top: 0;
						left: 0;
						width: 72upx;
						height: 32upx;
					}
					
					&:first-child {
						margin-left: 20upx;
						padding-top: 0;
					}

					.row {
						width: 100%;
						display: flex;
						flex-direction: row;

						.pic {
							flex-shrink: 0;
							width: 140rpx;
							height: 140rpx;
							border-radius: 10rpx;
							border: 1upx solid #f5f7f8;
						}
						.icon-location {
							width: 30upx;
							height: 30upx;
						}
						.info {
							flex: 1;
							overflow: hidden;
							padding-left: 20rpx;

							.name {
								color: #333333;
								font-size: 30rpx;
								font-weight: 500;
							}

							.tags {
								margin: 20upx 0;
								color: #ffffff;
								font-size: 20rpx;

								text {
									padding: 2rpx 10rpx;
									margin-right: 10upx;
									border-radius: 6rpx;
									background: linear-gradient(#f5a91d 0%, #f4a200 53%, #f7c372 100%);
								}

								label {
									padding: 2rpx 10rpx;
									border-radius: 6rpx;
									background-color: #DDF4ED;
									color: #32C59A;
								}
							}

							.address {
								color: #666666;
								font-size: 24upx;
								display: flex;
								align-items: center;
								.text {
									flex: 1;
								}
							}
						}
					}
				}
			}
		}

		.tab-list {
			background-color: #fff;
			border-bottom: 2rpx solid #f1f1f1;
			width: 750rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;

			.tab-item {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 250rpx;
				font-size: 28rpx;
				color: #999999;

				.value {
					padding: 30rpx 0 24rpx 0;
				}

				.line {
					position: absolute;
					bottom: 0;
					width: 28rpx;
					height: 6rpx;
					border-radius: 3rpx;
					background: #32C59A;
				}
			}

			.active {
				font-size: 30rpx;
				font-weight: 500;
				color: #020202;
			}
		}

		.list {
			.title {
				padding: 30upx 0 0 30upx;
				color: black;
				font-size: 34upx;
				font-weight: 500;
			}
		}

		.float-box {
			position: fixed;
			z-index: 999;
			bottom: 130upx;
			right: 25upx;
			width: 94upx;
			padding: 10upx 0;
			background-color: white;
			border-radius: 47upx;
			box-shadow: 0 0 20upx #4e4c4c50;
			opacity: 0.9;

			.item-box {
				line-height: 1;
				padding: 20upx 0;
				text-align: center;
				background: transparent;

				image {
					width: 44upx;
					height: 44upx;
				}

				view {
					text-align: center;
					color: #333333;
					font-size: 20upx;
					font-weight: 500;
				}
			}

			.divider {
				margin: 0 auto;
				width: 40upx;
				height: 2upx;
				background-color: #e8e8e8;
			}

			button::after {
				border: none;
				border-radius: 0;
			}
		}

		.empty-view {
			height: 30vh;
		}
	}
</style>